<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: head(~{ :: title}, ~{ :: link}, ~{ ::script},~{::style})">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>商户管理平台-用户列表</title>
    <link rel="stylesheet" th:href="@{/plugins/jquery-confirm/jquery-confirm.min.css}"/>
    <script th:src="@{/plugins/jquery-confirm/jquery-confirm.min.js}"></script>
    <style></style>
</head>
<body th:replace="layout::body(~{this::section})">
<section class="content-wrapper">
    <section class="content-header">
        <h1>
            用户
            <small>列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-dashboard"></i>商户管理平台</a></li>
            <li class="active">用户管理</li>
        </ol>
    </section>
    <section class="content">
        <div th:if="${respMsg != ''}" class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-ban"></i> 操作提示</h4>
            <label th:text="${respMsg}"/>
        </div>
        <div class="row">
            <div th:each="opts:${session.WEBOPTS}">
                <div class="col-md-1" th:if="${opts.href == '/MpsUser/Invite'}">
                    <a href="#" class="btn btn-block btn-primary" data-toggle="modal" data-target="#InviteModal" th:text="邀请"></a>
                </div>
            </div>
        </div>
        <div class="modal fade" id="InviteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            邀请用户
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div style="margin-bottom:10px;">
                            <div class="col-sm-4">
                                <input  id="userName"  type="text" class="form-control" placeholder="用户名称">
                            </div>
                            <a  class="btn btn-primary" onclick="query()">查询</a>
                        </div>
                        <div id="queryMessage"></div>
                        <div class="row">
                            <table  class='table table-bordered table-hover'><thead><tr><th style='text-align: center'>用户名</th><th style='text-align: center'>操作</th></tr></thead>
                            <tbody id="queryDate"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"  onclick="submitDate()">
                            提交更改
                        </button>

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
            <script type="application/javascript">
                var modalHTML = $("#InviteModal").html();
                function query() {
                    var username=$("#userName").val();
                    if (username.length==0){
                        return;
                    }
                    $.ajax({
                        type: 'GET',//请求方式：post
                        url: "/MpsUser/query",
                        data: {username:username},
                        error: function () {
                            alert('亲，请求失败！');
                        },
                        success: function (data) {
                            var mes=""
                            if(jQuery.isEmptyObject(data)){
                                mes="查找到0个用户";
                            }else {
                                mes="查找到1个用户";
                                var str="<tr style='text-align: center'><td>"+data.name+"</td><td><span><a href='#' onclick=sava('"+data.id+"')>邀请</a></span></td></tr>";
                                $("#queryDate").html(str);
                            }
                            var strmess="<label>"+mes+"</label>";
                            $("#queryMessage").html(strmess);
                        }
                    });
                }
                $("#InviteModal").on("hidden.bs.modal", function() {
                    $("#InviteModal").html(modalHTML);
                });
                
                function sava(obj) {
                    if(obj=="" && obj==null){
                        return;
                    }
                    $.ajax({
                        type: 'post',//请求方式：post
                        url: "/MpsOrg/invite",
                        data: {id:obj},
                        error: function () {
                            alert('亲，请求失败！');
                        },
                        success: function (data) {
                            alert(data);
                        }
                    });

                }
                
            </script>
        </div>
        <div class="row">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th style="text-align: center"><input type="checkbox"/></th>
                    <th style="text-align: center">用户名</th>
                    <th style="text-align: center">角色</th>
                    <th style="text-align: center">部门</th>
                    <th style="text-align: center">状态</th>
                    <th style="text-align: center">排序</th>
                    <th style="text-align: center">创建时间</th>
                    <th style="text-align: center">修改时间</th>
                    <th style="text-align: center">操作</th>
                </tr>
                </thead>
                <tbody>
                <!--/*@thymesVar id="WebUserList" type="java.util.List"*/-->
                <tr th:each="item:${MpsUserList}" style="text-align: center">
                    <td><input type="checkbox" th:value="${item.id}"/></td>
                    <td th:text="${item.name}"></td>
                    <td>
                        <span th:each="role:${item.roles}">
                            <span th:text="${role}"></span>
                            <span> </span>
                        </span>
                    </td>
                    <td>
                        <span th:each="dept:${item.depts}">
                            <span th:text="${dept}"></span>
                            <span> </span>
                        </span>
                    </td>
                    <td th:text="${item.status}"></td>
                    <td th:text="${item.sort}"></td>
                    <td th:text="${item.createTime}"></td>
                    <td th:text="${item.modifyTime}"></td>
                    <td>
                        <span th:each="opts:${session.WEBOPTS}">
                            <span th:if="${opts.href == '/MpsUser/Delete'}">
                                <a th:href="@{/MpsUser/Delete(id=${item.id})}" onclick="return confirm('确定删除?');">删除</a>
                            </span>
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </section>
</section>


</body>
</html>